<template>
  <div class="challenge-container">
    <div class="challenge-header">
      <span class="title">{{ $t('challenge.title') }}</span>
      <div class="controls">
        <d-button size="sm" variant="solid" @click="onStart" v-if="!challenge.active">{{ $t('challenge.start') }}</d-button>
        <d-button size="sm" variant="solid" @click="onStop" v-else>{{ $t('challenge.stop') }}</d-button>
        <d-button size="sm" variant="outline" @click="onNext" :disabled="!challenge.active">{{ $t('challenge.next') }}</d-button>
      </div>
    </div>
    <div class="challenge-stats">
      <span>{{ $t('challenge.score') }}：{{ challenge.score }}</span>
      <span class="divider" />
      <span>{{ $t('challenge.streak') }}：{{ challenge.streak }}</span>
      <span class="divider" />
      <span>{{ $t('challenge.progress') }}：{{ challenge.currentIndex + 1 }}/{{ challenge.questions.length }}</span>
    </div>

    <div v-if="challenge.active" class="question-card">
      <div class="q-title">{{ challenge.currentQuestion?.title }}</div>
      <div class="q-content">{{ challenge.currentQuestion?.content }}</div>
      <ul v-if="challenge.currentQuestion?.choices?.length" class="q-choices">
        <li v-for="c in challenge.currentQuestion?.choices" :key="c.key" @click="onChoose(c)">
          <span class="choice-key">{{ c.key }}.</span>
          <span>{{ c.text }}</span>
        </li>
      </ul>
      <div class="q-hint">{{ $t('challenge.hint') }}</div>
      <div v-if="!challenge.awaitingAnswer" class="q-tip">{{ $t('challenge.tip') }}</div>
    </div>

    <div class="achievements" v-if="challenge.achievements.length">
      <span class="ach-title">{{ $t('challenge.achievements') }}</span>
      <div class="ach-list">
        <span v-for="a in challenge.achievements" :key="a.id" class="ach-item">🏅 {{ a.name }}</span>
      </div>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { useChallengeStore } from '@/store';
const challenge = useChallengeStore();

const onStart = () => {
  challenge.start();
};
const onStop = () => {
  challenge.stop();
};
const onNext = () => {
  challenge.next();
};
const onChoose = (c: { key: string; text: string }) => {
  if (challenge.active && challenge.awaitingAnswer) {
    challenge.submitAnswer(c.key);
  }
};
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.challenge-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background-color: $devui-base-bg;
  box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);
}

.challenge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title { font-weight: 600; }
  .controls { display: flex; gap: 8px; }
}

.challenge-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  .divider { width: 1px; height: 12px; background-color: $devui-line; }
}

.question-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid $devui-line;
  border-radius: 8px;

  .q-title { font-weight: 600; color: $devui-text; }
  .q-content { color: $devui-text; }
  .q-choices { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .q-choices li { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid $devui-line; border-radius: 8px; background-color: $devui-primary-bg; cursor: pointer; transition: all 0.2s ease-in-out; }
  .q-choices li:hover { border-color: $devui-primary-line; box-shadow: 0 2px 6px 0 $devui-light-shadow; }
  .choice-key { display: inline-block; width: 20px; font-weight: 600; color: $devui-text; }
  .q-hint { font-size: $devui-font-size-sm; color: $devui-aide-text; }
  .q-tip { font-size: $devui-font-size-sm; color: $devui-warning; }
}

.achievements {
  display: flex;
  align-items: center;
  gap: 12px;
  .ach-title { font-weight: 600; }
  .ach-list { display: flex; gap: 8px; flex-wrap: wrap; }
  .ach-item { background-color: $devui-label-bg; color: $devui-text; border-radius: 12px; padding: 4px 10px; font-size: $devui-font-size-sm; }
}
</style>